<template>
  <div class="wy-loading">
      <div class="happy"></div>
      <div class="floor"></div>
  </div>
</template>

<script>
export default {
  ready () {
    setTimeout(() => {
      this.$route.router.go({path: '/home', replace: true})
    }, 1500)
  }
}
</script>

<style scoped>
  .wy-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 30px;
      height: 30px;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 999999;
  }

  .wy-loading .happy {
      height: 30px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-animation-name: r-transfer;
      animation-name: r-transfer;
  }

.wy-loading .happy,
.wy-loading .floor {
    position: absolute;
    width: 30px;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.wy-loading .floor {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    height: 8px;
    margin-top: 100%;
    background-color: rgba(0, 0, 0, .13);
    border-radius: 50%;
    -webkit-animation-name: floorshadow;
    animation-name: floorshadow
}

.wy-loading:after {
    position: absolute;
    top: 100%;
    left: 50%;
    font-size: 10px;
    -webkit-transform: translate(-50%, 20px);
    transform: translate(-50%, 20px);
    width: 80px;
    color: #999;
    text-align: center;
    content: "正在加载"
}

@keyframes floorshadow {
    0%,
    50%,
    100% {
        width: 15px;
        height: 4px
    }
    25%,
    25.1%,
    75%,
    75.1% {
        width: 30px;
        height: 8px
    }
}

@-webkit-keyframes floorshadow {
    0%,
    50%,
    100% {
        width: 15px;
        height: 4px
    }
    25%,
    25.1%,
    75%,
    75.1% {
        width: 30px;
        height: 8px
    }
}

@keyframes r-transfer {
    0% {
        background-color: red;
        margin-top: -100px
    }
    25% {
        margin-top: 0;
        border-radius: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25.1% {
        border-radius: 50%;
        margin-top: 0
    }
    25.1%,
    50% {
        background-color: #fe5e3e
    }
    50% {
        margin-top: -100px
    }
    50%,
    75% {
        border-radius: 50%
    }
    75%,
    75.1% {
        margin-top: 0
    }
    75.1% {
        border-radius: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    75.1%,
    100% {
        background-color: red
    }
    100% {
        margin-top: -100px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
}

@-webkit-keyframes r-transfer {
    0% {
        background-color: red;
        margin-top: -100px
    }
    25% {
        margin-top: 0;
        border-radius: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25.1% {
        border-radius: 50%;
        margin-top: 0
    }
    25.1%,
    50% {
        background-color: #fe5e3e
    }
    50% {
        margin-top: -100px
    }
    50%,
    75% {
        border-radius: 50%
    }
    75%,
    75.1% {
        margin-top: 0
    }
    75.1% {
        border-radius: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    75.1%,
    100% {
        background-color: red
    }
    100% {
        margin-top: -100px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
}


@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg)
    }
    50% {
        -webkit-transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
</style>
